<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

    <style type="text/css">
        body {
            height: 100%;
            margin: 0;
            padding: 0px;
            z-index: 0
        }

        html {
            height: 100%
        }

        #container {
            height: 100%;
            position: relative;
            z-index: 1;
        }

        .block {
            height: 20%;
            width: 100%;
            background-color: white;
        }
    </style>
    <script type="text/javascript"
        src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=DUS3zgcXlPG5gyjfdSra8NfpOblj7Ggr"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/library/LuShu/gl/src/LuShu_min.js"></script>
    <title>船舶交通流仿真平台</title>
</head>

<body>
    <div id="container"></div>

    <script type="text/javascript">
        // 百度地图API功能
        var map = new BMapGL.Map("container");
        map.centerAndZoom(new BMapGL.Point(118.6224279, 31.94938), 16);
        map.enableScrollWheelZoom(); // 使能缩放
        // 按住鼠标右键，修改倾斜角和角度
        // 开启这两项以启用3D
        // map.setHeading(64.5); //设置地图旋转角度
        // map.setTilt(73); //设置地图的倾斜角度
        var ship_pic = '';

        let ship1 = [
            {
                "lng": 118.60329,
                "lat": 31.939405
            },
            {
                "lng": 118.610979,
                "lat": 31.94302
            },
            {
                "lng": 118.617375,
                "lat": 31.946912
            },
            {
                "lng": 118.62298,
                "lat": 31.950619
            },
            {
                "lng": 118.627436,
                "lat": 31.955031
            },
            {
                "lng": 118.631784,
                "lat": 31.959779
            }
        ];
        let ship2 = [
            {
                "lng": 118.613782,
                "lat": 31.93395
            },
            {
                "lng": 118.619675,
                "lat": 31.940937
            },
            {
                "lng": 118.624921,
                "lat": 31.946084
            },
            {
                "lng": 118.63146,
                "lat": 31.950925
            },
            {
                "lng": 118.636132,
                "lat": 31.954847
            },
            {
                "lng": 118.640659,
                "lat": 31.958891
            }
        ];
        let delay_time = 2000;
        function startLuShu() {
            lushu1 = new BMapGLLib.LuShu(map, polyline1.getPath(), {
                geodesic: true,
                autoCenter: false,
                icon: new BMapGL.Icon(ship_pic, new BMapGL.Size(25, 25), { anchor: new BMapGL.Size(0, 15) }),
                speed: 100,
                enableRotation: true
            });
            lushu2 = new BMapGLLib.LuShu(map, polyline2.getPath(), {
                geodesic: true,
                autoCenter: false,
                icon: new BMapGL.Icon(ship_pic, new BMapGL.Size(25, 25), { anchor: new BMapGL.Size(0, 15) }),
                speed: 100,
                enableRotation: true
            });
            setTimeout(() => {
                map.addOverlay(polyline1);
                map.addOverlay(polyline2);
                lushu1.start();
                lushu2.start();
            }, delay_time);
        }
        var path1 = [];
        for (let i in ship1) {
            path1.push(new BMapGL.Point(ship1[i].lng, ship1[i].lat));
        }
        var path2 = [];
        for (let i in ship2) {
            path2.push(new BMapGL.Point(ship2[ship2.length-1-i].lng, ship2[ship2.length-1-i].lat));
        }
        var polyline1 = new BMapGL.Polyline(path1, {
            clip: false,
            geodesic: true,
            strokeWidth: 3,
            strokeStyle: 'dashed',
            strokeColor: 'blue',
            strokeOpacity: 0.5
        });
        var polyline2 = new BMapGL.Polyline(path2, {
            clip: false,
            geodesic: true,
            strokeWidth: 3,
            strokeStyle: 'dashed',
            strokeColor: 'blue',
            strokeOpacity: 0.5
        });
        
        startLuShu();

    </script>
</body>

</html>

